import Icon from '../icon'
import { memo } from 'react'
import styles from './index.module.scss'
import { useHistory } from 'react-router-dom'
import classNames from 'classnames'
type Props = {
  children: string | JSX.Element
  extra?: string | JSX.Element
  onLeftClick?: () => void
  className?: string
  rightContent?: string
}
export default memo(function NavBer(props: Props) {
  const { children, rightContent, onLeftClick } = props
  const { go } = useHistory()
  const back = () => {
    if (onLeftClick) {
      return onLeftClick()
    } else {
      return go(-1)
    }
  }
  return (
    <div className={classNames(styles.root, props.className)}>
      {/* 后退按钮 */}
      <div className="left" onClick={back} style={{ zIndex: 1 }}>
        <Icon type="iconfanhui" />
      </div>
      {/* 居中标题 */}
      <div className="title">{children}</div>

      {/* 右侧内容 */}
      <div className="right">{rightContent}</div>
    </div>
  )
})
